<template>
  <el-submenu :index="menu.path">
    <!--有子元素-->
    <template >
      <span slot="title" data-title="title"> <i :class="menu.icon"></i>{{menu.name}}</span>
    </template>
    <template v-for="(child) in menu.children">
      <el-menu-item :index="child.path" :route="child" v-if="isHideAside(child)||!hasChild(child)" @click.native="clickMenu(child)">
        <i :class="child.icon"></i>
        <span slot="title">{{child.name}}</span>
      </el-menu-item>
      <aside-menu-item v-else :menu="child"></aside-menu-item>
    </template>

  </el-submenu>
</template>

<script>
export default {
  name: "aside-menu-item",
  props:{
    menu: Object
  },
  data(){
    return {
    }
  },
  methods: {
    hasChild(menu){
      return menu.children && menu.children.length > 0
    },
    clickMenu(menu){
      this.$emit("menu-click",menu)
    },
    isHideAside(menu){
      return menu.hideAside === true
    },
  },
}
</script>

<style scoped>

</style>
